<template>
  <div>
    <!-- 顶部区域 -->
    <van-nav-bar title="前端最牛逼.vant" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="Product_details_page" v-for="(item,index) in desciptiondata" :key="index">
      <!-- 商品轮播图 -->
      <div class="Phone_details">
        <van-swipe :autoplay="3000" indicator-color="#00FFFF">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img :src="image.src" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 商品购买 -->
      <div class="Purchase_of_goods">
        <h2>{{item.title}}</h2>
        <p>
          市场价: ￥
          <del>{{item.market_price}}</del> 销售价
          <span>￥ {{item.sell_price}}</span>
        </p>
        <div class="Purchase_quantity">
          <span>购买数量</span>
          <van-stepper
            class="van_stepper"
            v-model="value"
            input-width="50px"
            button-size="40px"
          />
        </div>
        <!-- 按钮 -->
        <div class="btns">
          <van-button class="BuyNow" size="normal">立即购买</van-button>
          <van-button
            class="add_to_Shopping_Cart"
            size="normal"
            @click="add_to_Shopping_Cart(item.id,item.sell_price)"
          >加入购物车</van-button>
        </div>
      </div>
      <!-- 商品参数区域 -->
      <div class="parameters">
        <div class="parameters_hd">商品参数</div>
        <div class="parameter_bd">
          <p class="Item_number">商品货号: {{item.goods_no}}</p>
          <p class="in_stock">库存情况: {{item.stock_quantity}}</p>
          <p class="Added_time">上架时间: {{item.add_time}}</p>
        </div>
        <!-- 按钮 -->

        <van-button  color="#1989fa" class="margin_bt" plain type="primary" size="large">图文介绍</van-button>
        <van-button color="#f44" plain type="primary" size="large">商品评论</van-button>
      </div>
    </div>
    <!-- footer部分 -->
    <van-tabbar>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="search" dot to="/member">会员</van-tabbar-item>
      <van-tabbar-item icon="friends-o" info="1" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o" info="20" to="/search">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // 购物车数量
      list: 5,
      // 商品数量
      value:1,
      // 商品介绍数据
      desciptiondata: [],
      //  id
      itemId: 0,
      // 商品图片数据
      images: []
    }
  },
  created() {
    this.imagedata()
    this.productdetails()
  },
  methods: {
    onClickLeft() {
      this.$router.push('/goods/list')
    },
    // 获取轮播图数据
    async imagedata() {
      let id = this.$route.params.id
      const { data: res } = await this.$http.get(`/api/getthumimages/${id}`)
      // console.log(res);
      this.images = res.message
    },
    // 获取商品介绍数据
    async productdetails() {
      let id = this.$route.params.id
      // console.log(id);

      const { data: res } = await this.$http.get(`/api/goods/getinfo/${id}`)

      // console.log(res);
      this.desciptiondata = res.message
      // console.log(this.desciptiondata)
    },
    // 点击加入购物车
    add_to_Shopping_Cart(id, price) {
      this.$toast.success('已加入购物车')
      const res = {
        id: id,
        cou: this.value,
        price: price,
        selected: true
      }
      // console.log(id);
      this.$store.commit('add',res)
      // console.log(this.$store.state.id)
      //  this.$router.push(`/goods/detail/${id}`)
      //   this.$router.push(NewPage);
      //  this.$router.go(-1);
      // console.log(this.$store.state.shopcartfn);
    },
   
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #1989fa;
  color: #fff;
  span {
    color: #fff;
  }
}
.van-swipe__track {
  img {
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 200px;
  }
}
.Phone_details {
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
}
.Product_details_page {
  margin-top: 45px;
  margin-bottom: 45px;
  padding: 10px;
}
.Purchase_of_goods {
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  margin: 10px 0 0;
  padding: 15px;
  h2 {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    margin: 0;
    border-bottom: 1px solid #e9e9e9;
  }
  p {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #8f8f94;
    span {
      color: red;
      font-weight: 700;
    }
  }

  .Purchase_quantity {
    padding: 10px;
    span {
      font-size: 14px;
      color: #8f8f94;
    }
    .van_stepper {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
  .btns {
    .add_to_Shopping_Cart {
      background-color: #ff4444;
      color: #fff;
      font-weight: 700;
    }
    .BuyNow {
      background-color: #1989fa;
      color: #fff;
      font-weight: 700;
      margin-right: 5px;
    }
  }
}
.parameters {
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  margin: 10px 0 0;
  padding: 15px;
  .parameters_hd {
    font-size: 18px;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 10px;
  }
  .parameter_bd {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px;
    p {
      font-size: 14px;
      margin: 10px 0;
      color: #8f8f94;
    }
  }
  .margin_bt {
    margin-bottom: 10px;
  }
}
</style>